<template>
	<div class="h-full">
		<div class="h-full" id="showtopology"></div>
    <div class="fit2">
      <el-button type="primary" icon="el-icon-full-screen" @click="changeSize()"></el-button>
    </div>
	</div>
</template>

<script>
	import { Topology } from '@topology/core'

	export default {
		data() {
			return {
        flag: false
      }
		},
		methods: {
      changeSize(){
        this.flag = !this.flag
        if(this.flag){
          window.showtopology.fitView(true,10)
        }else{
          window.showtopology.fitView(false,10)
        }
      }
    },
    mounted() {
			const showtopology = new Topology('showtopology', {
				// https://developer.le5le.com/tutorial/topology.html#options-%E9%80%89%E9%A1%B9
				grid: false, // 是否显示网格
				rule: false, // 是否显示标尺
			})
      window.showtopology = showtopology
		},
	}
</script>

<style>
   .fit2{
    position: absolute;
    z-index: 999;
    width: 50px;
    bottom: 10px;
    right: 30px;
  }
</style>
